<template>
  <el-dialog title="新增分类" :visible.sync="display" :before-close="close" width="420px">
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item prop="radio">
        <el-radio-group v-model="form.radio">
          <el-radio :disabled="disabled" label="brothers">同级</el-radio>
          <el-radio label="children">子级</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="input">
        <el-input v-model="form.input" placeholder="请输入分类标题" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="sure">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { add_classify_service } from '../api'

export default {
  props: {
    display: {
      type: Boolean,
      default: false
    }
  },
  data: function() {
    return {
      form: {
        radio: 'brothers',
        input: ''
      },
      disabled: false,
      data: {},
      rules: {
        radio: [
          { required: true, message: '请选择分类关系', trigger: 'blur' }
        ],
        input: [
          { required: true, message: '请输入分类标题', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    close() {
      this.disabled = false
      this.form.input = ''
      this.form.radio = 'brothers'
      this.data = {}
      this.$emit('dialog-close')
    },
    sure() {
      // 确定逻辑
      this.$refs.form.validate((v) => {
        if (v) {
          const data = this.data
          add_classify_service(this.$route.query.spaceid, this.$route.query.type, this.form.radio === 'brothers' ? data.doc_parent_id : data.doc_id, this.form.input).then(() => {
            this.$emit('dialog-sure')
          })
        }
      })
    },
    show(data) {
      if (data.doc_parent_id === 'root') {
        this.disabled = true
        this.form.radio = 'children'
      }
      this.data = data
    }
  }
}
</script>

<style lang='scss' scoped>

</style>
